var React = require("react");
var ReactDOM = require("react-dom");
var arrCity = require("../../sources/cityData");
import {Link, hashHistory} from 'react-router';

class HeadTitleComponent extends React.Component {

  handleClick(e) {
    this.props.handleBack(this.props.title);
  }

  render() {
    return (
      <div className="fruit-header">
        <a onClick={this.handleClick.bind(this)} className='leftBtn'>&nbsp;</a>
        <span>{this.props.title}</span>
      </div>
    )
  }
}
class CityItemCompent extends React.Component {
  showLevelTwo(e){
    if(e.target.nodeName!='LI') return;
    var allHideEles = document.getElementsByClassName('subCl');
    if(allHideEles && allHideEles.length>0){
      $.each(allHideEles,function(idx,item){
        item.classList.add('hide');
      });
    }
    var ele = e.target.getAttribute('data-show');
    var hideEles = document.getElementById(ele);
    hideEles.classList.remove('hide');
  }
  selCurrentCity(e){
    console.info(e.target);
    //跳转回发布页面，并带回城市信息
    var innerHTML = e.target.innerHTML;
    window.sessionStorage.setItem('supplyArea', JSON.stringify(innerHTML));
    const path = 'publishFruit';
    hashHistory.push(path);
  }
  render() {
    var showLevelTwo = this.showLevelTwo;
    var selCurrentCity = this.selCurrentCity;
    var propsCity = this.props.city;
    var subLis = [];
    if(propsCity.sub && propsCity.sub.length>0){
      propsCity.sub.shift();
      propsCity.sub.pop();
      $.each(propsCity.sub,function(idx,item){
        var idText = item.name+idx;
        subLis.push(<span id={idText} key={item.name} onClick={selCurrentCity}>{item.name}</span>);
      });
    }

    var classText = this.props.city.name+this.props.index;
    return (
      <li data-show={classText} onClick={showLevelTwo}>
        {this.props.city.name}<span className='icon-more'></span>
        <div id={classText} className='subCl hide'>{subLis}</div>
      </li>
    )
  }
}
define('CitySelectionPage',function(){
var _CitySelectionPage = React.createClass ({
    getInitialState:function(){
            return {
                title:'',
                cityData:[]
            };
    },
  handleBack(){
    window.history.back();
  },
    render:function(){
       var cityList = arrCity.default;
      cityList.shift();
      cityList.pop();
       if(!cityList || cityList.length==0){
         return(
           <div>无城市数据</div>
         )
       }else{
         var lis=cityList.map(function (city,index) {
           return (
             <CityItemCompent  city={city} key={city.name} index={index}/>
           );
         });
       }

        return (
          <article className='sel-fruit-box'>
            <HeadTitleComponent title='供应地区' handleBack={this.handleBack.bind(this)}/>
            <article className='fruit-detail'>
              <div className='sel-city-level-one'>
                <ul className=''> {lis}</ul>
              </div>
            </article>
          </article>
        );
    }
});

return _CitySelectionPage;
});
